import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Detail from '../Detail'

export default class Message extends Component {
	state = {
		messageList:[
			{id:'001',title:'尚硅谷消息1',content:'好好学习'},
			{id:'002',title:'尚硅谷消息2',content:'天天向上'},
			{id:'003',title:'尚硅谷消息3',content:'少玩游戏'},
		]
	}
	render() {
		return (
			<div>
				<ul>
					{
						this.state.messageList.map((msgObj)=>{
							return (
								<li key={msgObj.id}>
									{/* params参数 */}
									{/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}/${msgObj.content}`}>{msgObj.title}</Link>&nbsp;&nbsp; */}
									
									{/* search参数 */}
									{/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}&content=${msgObj.content}`}>
										{msgObj.title}
									</Link> */}

									{/* state参数 */}
									<Link to={{
										pathname:'/home/message/detail/',
										state:{
											id:msgObj.id,
											title:msgObj.title,
											content:msgObj.content
										}
									}}>
										{msgObj.title}
									</Link>
								</li>
							)
						})
					}
				</ul>
				<hr />
				{/* params参数占位 */}
				{/* <Route path="/home/message/detail/:id/:title/:content" component={Detail}/> */}

				{/* search参数、state参数均无需占位 */}
				<Route path="/home/message/detail" component={Detail}/>
			</div>
		)
	}
	componentDidMount(){
		// console.log('Message挂载完毕')
	}
	componentWillUnmount(){
		// console.log('Message即将被卸载')
	}
}
